<template>
  <div class="VCharaPpt">
    <div class="VChara-item" v-for="(itemFrom, index) in arrList" :key="index">
      <el-form-item :prop="`${tagStr}_screenTag${index}`" label="发布屏幕">
        <el-select v-model="itemFrom.screenTag" placeholder="请选择" @change="screenChange(itemFrom)">
          <el-option v-for="item in screenList" :key="item.tag" :label="item.name" :value="item.tag"
            :disabled="getScreenDisabled(itemFrom, item)" />
        </el-select>
      </el-form-item>
      <el-form-item :prop="`${tagStr}_innerSeq${index}`" label="屏幕内序列">
        <el-select v-model="itemFrom.innerSeq" placeholder="请选择" @change="innerSeqChange">
          <el-option v-for="item in innerNum" :key="item" :label="item" :value="item"
            :disabled="getInnerDisabled(itemFrom, item)" />
        </el-select>
      </el-form-item>
      <div class="VChara-oper">
        <img :src="addImg" @click="addChara(index)" alt="">
        <img v-if="index > 0" :src="reduceImg" @click="reduceChara(index)" alt="">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import router from '@/router'
import { getInnerseq } from '@/api/ppt';
import { getScreenList } from '@/api/screen'
import { resizeImageToBlob, clearFormData } from '@/utils/utils'
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import addImg from '@/assets/index/icon-add.png';
import reduceImg from '@/assets/index/icon-reduce.png';


const props = defineProps({
  arrList: {
    type: Array as any,
    default: () => [],
  },
  rules: {
    type: Object,
    default: () => { },
  },
  tagStr: {
    type: String,
    default: ''
  },
  formData: {
    type: Object as any,
    default: () => { },
  },
})
const { arrList, rules, tagStr } = toRefs(props)
const { formData } = toReactive(props)

const screenList = ref<any>([]);
const innerseqList = ref<any>([]);

const disabledObj = reactive<any>({})

const innerNum = ref(10)

const baseRules = reactive({

});


function addChara(index: any) {
  arrList.value.splice(index + 1, 0, {})
  cpRules()
}

function reduceChara(index: any) {
  console.log(arrList.value.length)
  delete rules.value[`${tagStr.value}_screenTag${arrList.value.length - 1}`];
  delete rules.value[`${tagStr.value}_screenTag${arrList.value.length - 1}`];
  arrList.value.splice(index, 1);
  cpRules()
}

function cpRules() {
  arrList.value.forEach((ele: any, eleIndex: any) => {
    // 排除第一个验证
    if (eleIndex > 0) {

      rules.value[`${tagStr.value}_screenTag${eleIndex}`] = [{
        required: true,
        message: '请选择发布屏幕',
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          if (!ele.screenTag || ele.screenTag == '') {
            callback(new Error("请选择发布屏幕"));
          } else {
            callback();
          }
        }
      }]
      rules.value[`${tagStr.value}_innerSeq${eleIndex}`] = [{
        required: true,
        message: '请选择屏幕内序列',
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          if (!ele.innerSeq || ele.innerSeq == '') {
            callback(new Error("请选择屏幕内序列"));
          } else {
            callback();
          }
        }
      }]
    }
  });
}


function getDict() {
  getScreenList({
    current: 1,
    pageSize: 9999,
  }).then((res) => {
    screenList.value = res.data.data
  })
  getInnerseq({
    type: formData.type
  }).then((res) => {
    innerseqList.value = res.data.data || []
    // cpEquence()
  })
}

function cpEquence() {
  clearFormData(disabledObj)
  // 找到公共字段，然后arrList字段优先
  innerseqList.value = innerseqList.value.filter((innerseqEle: any) => {
    return !arrList.value.some((ele: any) => (innerseqEle.screenTag === ele.screenTag && innerseqEle.innerSeq === ele.innerSeq));
  });

  innerseqList.value.forEach((screenEle: any, screenIndex: any) => {
    if (disabledObj[screenEle.screenTag]) {
      disabledObj[screenEle.screenTag].push(screenEle.innerSeq)
    } else {
      disabledObj[screenEle.screenTag] = [screenEle.innerSeq]
    }
    disabledObj[screenEle.screenTag] = [...new Set(disabledObj[screenEle.screenTag])]
  })

  arrList.value.forEach((screenEle: any, screenIndex: any) => {
    if (disabledObj[screenEle.screenTag]) {
      disabledObj[screenEle.screenTag].push(screenEle.innerSeq)
    } else {
      disabledObj[screenEle.screenTag] = [screenEle.innerSeq]
    }
    disabledObj[screenEle.screenTag] = [...new Set(disabledObj[screenEle.screenTag])]
  })
  // console.log(disabledObj)
}

function getScreenDisabled(itemFrom: any, item: any) {
  // 使用some方法检查是否存在与当前待选屏幕相同的屏幕
  return arrList.value.some((selectedItem: any) => selectedItem.screenTag === item.tag);
}


function getInnerDisabled(itemFrom: any, num: any) {

  return disabledObj[itemFrom.screenTag]?.includes(num)
}

function screenChange(itemFrom: any) {
  itemFrom.innerSeq = null
  cpEquence()
}

function innerSeqChange(e: any) {
  console.log('innerSeqChange')
  cpEquence()
}

watchEffect(() => {
  cpEquence();
});

onMounted(async () => {
  // cpRules()
  getDict()
});

</script>

<style lang="scss" scoped>
.VCharaPpt {
  margin-bottom: 15px;
  font-size: 14px;

  .VChara-item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    height: 100px;

    .el-form-item {
      margin-left: 30px;
      margin-bottom: 0px !important;
      flex: 1;
    }

    .VChara-oper {
      cursor: pointer;

      width: 80px;
      margin-left: 20px;
    }
  }
}
</style>
